<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户列表" name="first">
        <div class="filter-container c-flex-row c-aligni-center c-justify-sb">
          <el-form class="form-container">
            <!-- <el-input @keyup.enter.native="handleFilter" v-model="listQuery.phoneInput" clearable placeholder="请输入手机号" style="width: 150px;"></el-input> -->
            <div class="margin-b">
              <el-input
                @keyup.enter.native="handleFilter"
                v-model="listQuery.mobile"
                clearable
                placeholder="手机号"
                style="width: 200px;"
              ></el-input>
              <el-input
                @keyup.enter.native="handleFilter"
                v-model="listQuery.nickname"
                clearable
                placeholder="昵称"
                style="width: 200px;"
              ></el-input>
              <el-input
                @keyup.enter.native="handleFilter"
                v-model="listQuery.reNickname"
                clearable
                placeholder="推荐人昵称"
                style="width: 200px;"
              ></el-input>
              <!--<el-input @keyup.enter.native="handleFilter" v-model="listQuery.agentNickname" clearable placeholder="服务商昵称" style="width: 200px;" v-if="this.agentLevel > 0"></el-input>-->
              <el-select
                clearable
                style="width: 200px;"
                v-model="listQuery.userTypeValue"
                placeholder="身份"
              >
                <el-option
                  v-for="item in selectOptions"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <el-select
              clearable
              style="width: 180px;"
              v-model="listQuery.timeType"
              placeholder="时间类型"
            >
              <el-option label="注册时间" :value="1"></el-option>
              <el-option label="成为VIP时间" :value="2"></el-option>
              <el-option label="成为SVIP时间" :value="3"></el-option>
            </el-select>
            <el-date-picker
              style="width:180px;"
              :editable="false"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="时间（开始）"
              @change="timeCheck(1)"
              v-model="listQuery.regist_time"
            ></el-date-picker>
            <span style="padding: 0 10px;font-size: 12px;color: #666;">到</span>
            <el-date-picker
              style="width:180px;"
              :editable="false"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="时间（结束）"
              @change="timeCheck(2)"
              v-model="listQuery.end_time"
            ></el-date-picker>
            <el-button type="primary" class="search" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button v-if="tableData.length > 0" @click="handleDownload">导出Excel</el-button>
            <el-switch v-model="hasMobile" @change="filterHasMobile" active-text="已绑定手机号用户"></el-switch>
            <!-- <div style="padding-left: 20px;">
					<el-input v-model="listQuery.commandPhone" clearable placeholder="请输入推荐人手机号" style="width: 200px;"></el-input>
					<el-input v-model="listQuery.partnerPhone" clearable placeholder="合伙人手机号必须输全" style="width: 200px;"></el-input>
					<el-date-picker type="date" format="yyyy-MM-dd" placeholder="成为VIP时间（开始）" v-model="listQuery.becomeVip_time">
          </el-date-picker><span style="padding: 0 10px;font-size: 12px;color: #666;">到</span>
          <el-date-picker type="date" format="yyyy-MM-dd" placeholder="成为VIP时间（结束）"  v-model="listQuery.becomeVip_end_time">
          </el-date-picker>
					<el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
	  			<el-button type="success" @click="handleDownload">导出Excel</el-button>
            </div>-->
          </el-form>
        </div>
        <div>
          <el-table
            :data="tableData"
            :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
            row-key="id"
            v-loading="listLoading"
            element-loading-text="加载中..."
            fit
            highlight-current-row
            style="width: 100%;font-size: 12px;color:#222;font-family: PingFangSC-Regular;"
          >
            <el-table-column width="240" align="center" label="昵称">
              <template slot-scope="scope">
                <div class="c-flex-row c-aligni-center">
                  <div style="width:40px;height:40px;">
                    <img
                      :src="scope.row.headimgurl"
                      style="width:40px;height:40px;border-radius:100%;vertical-align:middle;"
                    />
                  </div>
                  <div style="margin-left: 4px;text-align: left;">
                    <span>
                      {{scope.row.nickname}}
                      <br />
                      <span style="color: #999;">(ID：{{scope.row.showUserId}})</span>
                    </span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column width="80" align="center" label="姓名">
			        <template slot-scope="scope">
			          <span>{{scope.row.realName}}</span>
			        </template>
            </el-table-column>-->
            <el-table-column width="120" align="center" label="手机号">
              <template slot-scope="scope">
                <span>{{scope.row.mobile}}</span>
              </template>
            </el-table-column>

            <!--<el-table-column width="80" align="center" label="地区">
			        <template slot-scope="scope">
			          <span>{{scope.row.province}}{{scope.row.city}}{{scope.row.area}}</span>
			        </template>
            </el-table-column>-->
            <el-table-column width="120" align="center" label="注册时间">
              <template slot-scope="scope">
                <span>{{scope.row.createdAt}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column width="100"  align="center" label="vip/svip时间">
			        <template slot-scope="scope">
			          <span v-if="scope.row.vipType == 2 && scope.row.vipStartTime">{{scope.row.vipStartTime}}<br>{{scope.row.vipEndTime}}</span>
                <span v-if="scope.row.vipType == 4 && scope.row.svipStartTime">{{scope.row.svipStartTime}}<br>{{scope.row.svipEndTime}}</span>
			        </template>
            </el-table-column>-->
            <el-table-column width="120" align="center" label="用户身份">
              <template slot-scope="scope">
                <span v-if="scope.row.vipType == 1">普通会员</span>
                <span v-if="scope.row.vipType == 2">vip</span>
                <span v-if="scope.row.vipType == 3">代理商</span>
                <span v-if="scope.row.vipType == 4">svip</span>
                <span v-if="scope.row.vipType == 5">合伙人</span>
                <span v-if="scope.row.vipType == 6">分公司</span>
                <div class="is-hm" v-if="scope.row.isManualVip == 1">手动设置</div>
              </template>
            </el-table-column>
            <el-table-column width="120" align="center" label="推荐人">
              <template slot-scope="scope">
                <span v-if="scope.row.puserId">
                  <!--<img :src="scope.row.parentImg" style="width:40px;height:40px;border-radius:100%;vertical-align:middle;"><br>-->
                  <span>
                    {{scope.row.reNickname}}
                    <br />
                    （ID：{{scope.row.showpUserId}}）
                  </span>
                </span>
              </template>
            </el-table-column>
            <!-- <el-table-column width="80"  align="center" label="累计收入">
		        <template slot-scope="scope">
		          <span>{{scope.row.totalIncome}}</span>
		        </template>
            </el-table-column>-->
            <!--<el-table-column  width="100" align="center" label="是否手动设置VIP">
		        <template slot-scope="scope">
		          <span v-if="scope.row.isManualVip == 1" style="color:#409EFF;">✔</span>
              <span v-else style="color:red;">✘</span>
		        </template>
            </el-table-column>-->
            <!-- <el-table-column width="80" align="center" label="积分">
			        <template slot-scope="scope">
			          <span>{{scope.row.points}}</span>
			        </template>
            </el-table-column>-->
            <el-table-column width="340" align="center" label="操作">
              <template slot-scope="scope">
                <!--<div v-for='a in options'>
			        		<b v-if='scope.row.userType==a.item' v-for='item in a.operates' @click="listenCall(item.method)">{{item.name}}</b>
                </div>-->
                <div>
                  <b
                    v-if="permission == 3"
                    @click="editCommand(scope.row.userId, scope.$index)"
                  >修改推荐人</b>
                  <span v-if="permission == 3" class="color-409">|</span>
                  <b
                    v-if="permission == 3 && (scope.row.vipType == 8 | scope.row.vipType == 7 | scope.row.vipType == 2)"
                    @click="setMember(scope.row.userId, 1, scope.$index)"
                  >设置普通会员</b>
                  <span
                    v-if="permission == 3 && (scope.row.vipType == 8 | scope.row.vipType == 7 | scope.row.vipType == 2)"
                    class="color-409"
                  >|</span>
                  <!-- <b
                    v-if="permission == 3 && (scope.row.vipType == 1 | scope.row.vipType == 4)"
                    @click="setVip(scope.row.userId, 2, scope.$index)"
                  >设置VIP</b>-->
                  <b
                    v-if="permission == 3 && (scope.row.vipType == 1 | scope.row.vipType == 4)"
                    @click="setVips(scope.row.userId,scope.row.vipType)"
                  >设置VIP</b>
                  <span
                    v-if="permission == 3 && (scope.row.vipType == 1 | scope.row.vipType == 4)"
                    class="color-409"
                  >|</span>
                  <!-- <b
                    v-if="permission == 3 && (scope.row.vipType == 1 | scope.row.vipType == 2) && companyMemberPrice.filter(item => item.status == 1 && item.vipType == 4).length"
                    @click="setVip(scope.row.userId, 4, scope.$index)"
                  >设置SVIP</b>
                  <span
                    v-if="permission == 3 && (scope.row.vipType == 1 | scope.row.vipType == 2) && companyMemberPrice.filter(item => item.status == 1 && item.vipType == 4).length"
                    class="color-409"
                  >|</span>-->
                  <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">更多</span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        :command="{ userId: scope.row.userId, vipType: scope.row.vipType ,name:'a'}"
                      >旗下客户</el-dropdown-item>
                      <el-dropdown-item :command="{ userId: scope.row.userId, name:'b'}">我的上线</el-dropdown-item>
                      <el-dropdown-item :command="{ userId: scope.row.userId, name:'c'}">账户查询</el-dropdown-item>
                      <el-dropdown-item
                        v-if="permission == 3"
                        :command="{ userId: scope.row.userId, index: scope.$index, name:'d'}"
                      >调整方案包个数</el-dropdown-item>
                      <el-dropdown-item :command="{ userId: scope.row.userId, name:'e'}">
                        <p
                          @click="showEnableModel(scope.row.userId,scope.row.enableComment)"
                        >{{scope.row.enableComment == 1 ?'设为黑名单' :'取消黑名单'}}</p>
                      </el-dropdown-item>
                      <el-dropdown-item :command="{ userId: scope.row.userId, name:'f'}">
                        <p @click="showSendMassge(scope.row.userId)">私发消息</p>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <!--<b @click="myCustomer(scope.row.userId, scope.row.vipType)">旗下客户</b>-->
                </div>
                <!--<div>
                  <b v-if="permission == 3 && (scope.row.vipType == 4 | scope.row.vipType == 2)" @click="setMember(scope.row.userId, 1, scope.$index)">设置普通会员</b>
                  <span v-if="permission == 3 && (scope.row.vipType == 4 | scope.row.vipType == 2)" class="color-409">|</span>
			        	<b v-if="permission == 3 && (scope.row.vipType == 1 | scope.row.vipType == 4)" @click="setVip(scope.row.userId, 2, scope.$index)">设置VIP</b>
			        	<span v-if="permission == 3 && (scope.row.vipType == 1 | scope.row.vipType == 4)" class="color-409">|</span>
                  <b v-if="permission == 3 && (scope.row.vipType == 1 | scope.row.vipType == 2)" @click="setVip(scope.row.userId, 4, scope.$index)">设置SVIP</b>

                </div>-->
                <!--<div>


                  <b @click="myHighLine(scope.row.userId)">我的上线</b>
                  <span class="color-409">|</span>
                  <b @click="showBalance(scope.row.balance, scope.row.totalIncome, scope.row.points)">账户查询</b>
                  <span v-if="permission == 3" class="color-409">|</span>
			        	<b v-if="permission == 3" @click="giveIntegre(scope.row.userId, scope.$index, $event)">调整积分</b>
                </div>-->
              </template>
            </el-table-column>
          </el-table>
          <div class="block text-c">
            <!--分页组件 current-page:当前页   -->
            <!--   page-sizes:每页几条数据（选项）   -->
            <!--   page-size:每页几条数据   -->
            <!--   total:总条数   -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="listQuery.currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listQuery.total"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="用户收入排行榜" name="seconde">
        <el-row>
          <el-col :span="4" style="margin-right:5px">
            <el-input v-model="listQuery.mobile" placeholder="请输入手机号"></el-input>
          </el-col>
          <el-col :span="4" style="margin-right:5px">
            <el-input v-model="listQuery.nickname" placeholder="请输入昵称"></el-input>
          </el-col>
          <el-col :span="4" style="margin-right:5px">
            <el-button icon="el-icon-search" type="info" @click="handleFilter">搜索</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="singleTable"
          width="100%"
          :data="rankingList"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column label="昵称">
            <template slot-scope="scope">
              <img
                :src="scope.row.headimgurl"
                style="width:40px;height:40px;border-radius:100%;vertical-align:middle;"
              />
              <p>{{scope.row.nickname}}</p>
            </template>
          </el-table-column>
          <el-table-column property="balance" label="金额：元"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="提示" :visible.sync="enableComment" width="30%">
      <span v-if="isenable == 0">设为黑名单后，该用户将无法在店铺内发表评论</span>
      <span v-else>取消黑名单后，该用户可以在店铺内发表评论</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="enableComment = false">取 消</el-button>
        <el-button type="primary" @click="setEnableComment">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="私发消息" :visible.sync="showSendMessage" width="30%">
      <el-form :model="sendMassgeInfo" label-width="100px">
        <el-form-item label="消息标题：" prop="title">
          <el-input v-model="sendMassgeInfo.messageTile"></el-input>
        </el-form-item>
        <el-form-item label="推送类型：" prop="type">
          <el-select
            v-model="sendMassgeInfo.messageTypeStatus"
            @change="sendMassgeInfo.typeId = ''"
            placeholder="请选择推送类型"
          >
            <el-option label="课程" :value="1"></el-option>
            <el-option label="活动" :value="2"></el-option>
          </el-select>

          <el-select v-model="sendMassgeInfo.typeId" placeholder="请选择内容">
            <template v-if="sendMassgeInfo.messageTypeStatus == 1">
              <div v-for="(item,index) in courseList" :key="index">
                <el-option :label="item.name" :value="item.courseId"></el-option>
              </div>
            </template>
            <template v-if="sendMassgeInfo.messageTypeStatus == 2"></template>
          </el-select>
        </el-form-item>
        <el-form-item label="消息内容：" prop="cont">
          <el-input type="textarea" v-model="sendMassgeInfo.messageDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showSendMessage = false">取 消</el-button>
        <el-button type="primary" @click="sendMassge">确 定</el-button>
      </span>
    </el-dialog>
    <balanceOfAccount v-show="isShowBalance" :balance="balance" @changeShowBalance="hideBalance"></balanceOfAccount>
    <editCommand
      v-if="isShowCommand"
      @hideCommand="hideCommand"
      :userInfo="userInfo"
      @commandSave="commandSave"
    ></editCommand>
    <myCustomers
      v-show="isShowCustomers"
      @hideCustomers="hideCustomers"
      :customerData="customerData"
    ></myCustomers>
    <highLine
      :highLineData="highLineData"
      :agentLevel="agentLevel"
      v-show="isShowHighLine"
      @hideHighLine="hideHighLine"
    ></highLine>
    <vip
      v-if="isShowVip"
      @hideVip="hideVip"
      @confirm="confirm"
      :vipType="vipType"
      :companyMemberPrice="companyMemberPrice"
    ></vip>

    <el-dialog title="设置VIP" :visible.sync="showVIP" width="50%">
      <el-form>
        <el-form-item label="会员类型：">
          <el-radio v-model="vipTypes" :label="2">黄金会员</el-radio>
          <el-radio v-model="vipTypes" :label="7">钻石会员</el-radio>
          <el-radio v-model="vipTypes" :label="8">至尊会员</el-radio>
        </el-form-item>
        <el-form-item label="欧币余额：">
          <el-input-number v-model="ObalanceNum"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showVIP = false">取 消</el-button>
        <el-button type="primary" @click="confirmVIP('message')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getMemberList,
  getBalance,
  myHighLine,
  myCustomers,
  giveIntegre,
  setVip,
  commandSave,
  excelMembers,
  enableComment
} from "@/api/member";
import { pushMessage } from "@/api/course";
import { marketing_member_members } from "@/utils/permission";
import { getAgentLevels } from "@/utils/permission";
export default {
  components: {
    balanceOfAccount: require("./components/balanceOfAccount").default, // 引入账户余额组件
    editCommand: require("./components/editCommand").default, // 引入修改推荐人组件
    myCustomers: require("./components/myCustomers").default, // 引入旗下客户组件
    highLine: require("./components/highLine").default, // 引入我的上线组件
    vip: require("./components/vip").default // 引入设置vip
  },
  data() {
    return {
      activeName: "first",
      enableComment: false,
      rankingTotal: "",
      listQuery: {
        currentPage: 1, // 当前页
        total: null, // 数据总条数
        mobile: null,
        timeType: null,
        nickname: null,
        reNickname: null,
        agentNickname: null,
        regist_time: "", // 搜索的注册会员起始时间
        end_time: "", // 搜索的注册会员结束时间
        userTypeValue: null, // 搜索选择的用户身份
        becomeVip_time: "", // 搜索选择的成为VIP起始时间
        becomeVip_end_time: "", // 搜索选择的成为VIP结束时间
        page: 1,
        hasMobile: -1
      },
      hasMobile: false,
      permission: 3,
      isShowBalance: false, // 是否显示账户余额组件
      balance: { balance: 0, totalIncome: 0, points: 0 }, // 要传的账户余额
      isShowCommand: false, // 是否显示修改推荐人,
      isShowCustomers: false, // 是否显示旗下客户组件
      isShowHighLine: false, // 是否显示我的上线组件
      isShowVip: false,
      listLoading: false,
      highLineData: [],
      myCustomers: [],
      customerData: {
        members: { data: [] },
        num: {
          directNum: 0,
          normalNum: 0,
          vipNum: 0,
          svipNum: 0
        }
      },
      userInfo: [],
      dealId: null,
      vipType: null,
      tableIndex: null,
      selectOptions: [
        // 用户身份下拉菜单选择项
        {
          id: 1,
          value: "普通会员"
        },
        {
          id: 2,
          value: "VIP"
        },
        {
          id: 4,
          value: "SVIP"
        }
      ],
      tableData: [],
      companyMemberPrice: [],
      companyId: null,
      agentLevel: 0,
      URLAPI: process.env.BASE_API,
      eUserId: "",
      isenable: "",
      showSendMessage: false,
      sendMassgeInfo: {
        typeId: "", //课程ID
        messageTile: "",
        messageDesc: "",
        messageTypeStatus: "", //1课程2活动
        messageType: "", //课程消息
        messageTypes: 1, // 0系统消息 1推送 2问答 3评论 4受益 5分享
        userId: ""
      },

      courseList: [],
      rankingList: [],
      showVIP: false,
      vipTypes: null,
      ObalanceNum: null,
      userId: null
    };
  },
  created() {
    this.getModelPermission();
    this.getList();
    this.agentLevel = getAgentLevels();
    if (this.agentLevel == 1) {
      this.selectOptions = [
        {
          id: 1,
          value: "普通会员"
        },
        {
          id: 2,
          value: "VIP"
        },
        {
          id: 4,
          value: "SVIP"
        },
        {
          id: 3,
          value: "代理商"
        }
      ];
    } else if (this.agentLevel == 3) {
      this.selectOptions = [
        // 用户身份下拉菜单选择项
        {
          id: 1,
          value: "普通会员"
        },
        {
          id: 2,
          value: "VIP"
        },
        {
          id: 4,
          value: "SVIP"
        },
        {
          id: 3,
          value: "代理商"
        },
        {
          id: 5,
          value: "合伙人"
        },
        {
          id: 6,
          value: "分公司"
        }
      ];
    }
  },
  methods: {
    confirmVIP() {
      setVip({
        userId: this.userId,
        vipType: this.vipTypes,
        radio: 12,
        Obalance: this.ObalanceNum
      }).then(res => {
        this.$message({
          type: "success",
          message: "设置成功"
        });
      });
      this.showVIP = false
    },
    setVips(userId,vipType) {
      this.userId = userId;
      this.vipTypes = vipType
      this.showVIP = true;
    },
    handleClick() {
      this.listQuery = {};
    },
    showSendMassge(id) {
      this.sendMassgeInfo.userId = id;
      this.showSendMessage = true;
    },
    sendMassge() {
      if (this.sendMassgeInfo.messageTile == "") {
        this.$message({
          type: "error",
          message: "添加消息标题!"
        });
      } else if (this.sendMassgeInfo.messageTypeStatus == "") {
        this.$message({
          type: "error",
          message: "请选择推送类型!"
        });
      } else if (this.sendMassgeInfo.typeId == "") {
        this.$message({
          type: "error",
          message: "请选择推送内容!"
        });
      } else if (this.sendMassgeInfo.messageDesc == "") {
        this.$message({
          type: "error",
          message: "请输入消息内容!"
        });
      }
      if (this.sendMassgeInfo.messageTypeStatus == 1) {
        for (let i = 0; i < this.courseList.length; i++) {
          const element = this.courseList[i];
          if (element.courseId == this.sendMassgeInfo.typeId) {
            this.sendMassgeInfo.messageType = element.courseType;
          }
        }
      } else {
        this.sendMassgeInfo.messageType = "";
      }
      pushMessage(this.sendMassgeInfo).then(res => {
        this.$message({
          type: "success",
          message: "发送成功!"
        });
        this.sendMassgeInfo = {};
        this.showSendMessage = false;
      });
    },
    setEnableComment() {
      enableComment({
        userId: this.eUserId,
        enableComment: this.isenable
      }).then(res => {
        this.$message({
          type: "success",
          message: "设置成功!"
        });
        this.enableComment = false;
      });
      this.getList();
    },
    showEnableModel(id, enableComment) {
      this.isenable = enableComment == 1 ? 0 : 1;
      this.eUserId = id;
      this.enableComment = true;
    },
    getModelPermission() {
      this.permission = marketing_member_members();
    },
    handleCommand(command) {
      if (command.name == "a") {
        this.myCustomer(command.userId, command.vipType);
      } else if (command.name == "b") {
        this.myHighLine(command.userId);
      } else if (command.name == "c") {
        this.showBalance(command.userId);
      } else if (command.name == "d") {
        this.giveIntegre(command.userId, command.index, command.event);
      }
    },
    getList() {
      this.listLoading = true;
      getMemberList(this.listQuery)
        .then(res => {
          this.tableData = res.data.data.users.data;
          this.listQuery.total = res.data.data.users.total;
          this.companyMemberPrice =
            res.data.data.companyMemberPrice.length > 0
              ? res.data.data.companyMemberPrice
              : [];
          this.listLoading = false;
          this.companyId = res.data.data.companyId;
          this.courseList = res.data.data.course;
          this.rankingList = res.data.data.income.data;
          this.rankingTotal = res.data.data.income.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    listenCall(methodsWords) {
      // 监听点击了哪个菜单
      console.log("methodsWords", methodsWords);
      this[methodsWords](); // 调用对应方法
    },
    showBalance(userId) {
      // 显示账户余额组件
      var data = { userId: userId };
      console.log(userId);
      getBalance(data)
        .then(res => {
          this.isShowBalance = true;
          this.balance.balance = res.data.data.balance;
          this.balance.totalIncome = res.data.data.totalIncome;
          this.balance.points = res.data.data.points;
          this.balance.time =
              res.data.data.vipStartTime + "~" + res.data.data.vipEndTime
        })
        .catch(err => {
          console.log(err);
          this.$message({
            type: "error",
            message: "获取失败!"
          });
        });
    },
    hideBalance(msg) {
      // 关闭账户余额组件
      this.isShowBalance = msg;
    },
    editCommand(id, index) {
      this.isShowCommand = true;
      this.userInfo.userId = id;
      this.userInfo.vipType = this.tableData[index].vipType;
      this.tableIndex = index;
      this.userInfo.title = "修改推荐人";
    },
    commandSave(radio) {
      var data = { userId: this.userInfo.userId, radio: radio };
      commandSave(data)
        .then(res => {
          this.$message({
            type: "success",
            message: "设置成功!"
          });
          // if (radio) {
          //   this.tableData[this.tableIndex].reNickname = res.data.data.nickname
          // } else {
          //   this.tableData[this.tableIndex].reNickname = null
          //   this.tableData[this.tableIndex].puserId = null
          //   this.tableData[this.tableIndex].parentImg = null
          // }
          this.isShowCommand = false;
          this.userInfo = [];
          this.tableIndex = null;
          this.getList();
        })
        .catch(err => {
          console.log(err);
        });
    },
    hideCommand(msg) {
      this.isShowCommand = msg;
    },
    setMember(userId, vipType, index) {
      // 设置为普通会员的方法
      this.$confirm("确定设置为普通会员?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 点确定执行的方法
          this.dealId = userId;
          this.vipType = vipType;
          this.tableIndex = index;
          this.confirm();
        })
        .catch(() => {
          // 点取消执行的方法
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    setVip(userId, type, index) {
      // 设置为VIP会员的方法
      if (this.companyMemberPrice.length == 0) {
        this.$message({
          type: "warning",
          message: "请先设置会员权益！"
        });
        return false;
      }
      this.isShowVip = true;
      this.dealId = userId;
      this.vipType = type;
      this.tableIndex = index;
    },
    hideVip(msg) {
      this.isShowVip = msg;
      this.dealId = null;
      this.vipType = null;
      this.tableIndex = null;
    },
    confirm(radio = null) {
      var data = { userId: this.dealId, vipType: this.vipType, radio: radio };
      this.listLoading = true;
      setVip(data)
        .then(res => {
          this.listLoading = false;
          this.$message({
            type: "success",
            message: "设置成功!"
          });
          if (this.vipType == 2) {
            this.tableData[this.tableIndex].vipStartTime =
              res.data.data.vipStartTime;
            this.tableData[this.tableIndex].vipEndTime =
              res.data.data.vipEndTime;
          } else {
            this.tableData[this.tableIndex].svipStartTime =
              res.data.data.vipStartTime;
            this.tableData[this.tableIndex].svipEndTime =
              res.data.data.vipEndTime;
          }
          this.tableData[this.tableIndex].vipType = this.vipType;
          this.tableData[this.tableIndex].isManualVip = 1;
          this.isShowVip = false;
          this.dealId = null;
          this.vipType = null;
          this.tableIndex = null;
        })
        .catch(err => {
          this.listLoading = false;
          console.log(err);
        });
    },
    myHighLine(userId) {
      // 查看我的上线
      this.isShowHighLine = true;
      var data = { userId: userId };
      myHighLine(data)
        .then(res => {
          this.highLineData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    giveIntegre(userId, index, $event) {
      // 赠送积分
      this.$prompt("请输入方案包(如要减方案包请输入负号，如-10)", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          if (
            Math.round(this.tableData[index].points) + Math.round(value) <
            0
          ) {
            this.$message({
              type: "warning",
              message: "账户方案包不足，无法操作！"
            });
            return false;
          }
          var data = { userId: userId, value: value };
          this.listLoading = true;
          giveIntegre(data)
            .then(res => {
              this.listLoading = false;
              this.$message({
                type: "success",
                message: "成功调整方案包: " + value
              });
              this.tableData[index].points = (
                Math.round(this.tableData[index].points) +
                Math.round(res.data.data)
              ).toFixed(2);
            })
            .catch(err => {
              this.listLoading = false;
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    myCustomer(userId, vipType) {
      // 查看我的旗下客户
      this.isShowCustomers = true;
      var data = {
        userId: userId,
        vipType: vipType,
        companyId: this.companyId
      };
      myCustomers(data)
        .then(res => {
          this.customerData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    hideCustomers(msg) {
      // this.customerData = []
      this.isShowCustomers = msg;
    },
    hideHighLine(msg) {
      this.highLineData = [];
      this.isShowHighLine = msg;
    },
    handleSizeChange(val) {
      // 切换每页几条数据方法
      // console.log(`每页 ${val} 条`)
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      // 切换当前页
      // console.log(`当前页: ${val}`)
      this.listQuery.page = val;
      this.getList();
    },
    handleFilter() {
      if (
        (this.listQuery.regist_time || this.listQuery.end_time) &&
        this.listQuery.timeType == null
      ) {
        this.$message({
          message: "请选择搜索时间类型",
          type: "error"
        });
        return;
      }
      this.listQuery.page = 1;
      this.getList();
    },
    filterHasMobile(val) {
      if (val) {
        this.listQuery.hasMobile = 1;
      } else {
        this.listQuery.hasMobile = -1;
      }
      this.handleFilter();
    },
    handleDownload() {
      var form = "";
      if (this.listQuery.timeType) {
        form += "&timeType=" + this.listQuery.timeType;
      }
      if (this.listQuery.hasMobile == 1) {
        form += "&hasMobile=" + this.listQuery.hasMobile;
      }
      if (this.listQuery.regist_time) {
        form += "&regist_time=" + this.listQuery.regist_time;
      }
      if (this.listQuery.end_time) {
        form += "&end_time=" + this.listQuery.end_time;
      }
      if (this.listQuery.userTypeValue) {
        form += "&userTypeValue=" + this.listQuery.userTypeValue;
      }
      if (this.listQuery.mobile) {
        form += "&mobile=" + this.listQuery.mobile;
      }
      if (this.listQuery.nickname) {
        form += "&nickname=" + this.listQuery.nickname;
      }
      if (this.listQuery.reNickname) {
        form += "&reNickname=" + this.listQuery.reNickname;
      }
      if (this.listQuery.agentNickname) {
        form += "&agentNickname=" + this.listQuery.agentNickname;
      }

      window.open(
        this.URLAPI + "/excel/excelMembers?companyId=" + this.companyId + form
      );
      // excelMembers(this.listQuery).then(res => {
      //   if (res.data.statusCode == 200) {
      //     console.log(res.data.data)
      //   }
      // }).catch(err => {
      //   console.log(err)
      // })
    },
    timeCheck(type) {
      if (
        this.listQuery.regist_time &&
        this.listQuery.end_time &&
        this.listQuery.regist_time > this.listQuery.end_time
      ) {
        this.$message({
          message: "结束时间不能小于开始时间",
          type: "error"
        });

        if (type == 1) {
          this.listQuery.regist_time = null;
        } else {
          this.listQuery.end_time = null;
        }
      }
    }
  }
};
</script>

<style scoped>
b:hover {
  color: #0a76a4;
}
.is-hm {
  font-size: 10px;
  color: #fff;
  text-align: center;
  height: 18px;
  line-height: 18px;
  width: 60px;
  border-radius: 18px;
  background: #409eff;
  margin: 0 auto;
}
.el-dropdown-link {
  font-size: 14px;
  padding: 0px;
  cursor: pointer;
  color: #409eff;
}
</style>
